<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>淘乐乐商城注册页面</title>
		<script src="/static/reg/libs/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/reg/js/jQuery/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="/static/layer/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="/static/reg/bootStrap/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="/static/reg/sass/index.css" />
		<link rel="stylesheet" type="text/css" href="/static/reg/css/index.css">
	</head>
	<body>

			<div class="laoda" style="display:none">

</div>

		<header>
<!--			<a href="http://taolele.com/" class="logo"><img src="/static/reg/img/logo1.jpg" alt=""></a>-->
			<div class="desc">欢迎注册</div>
			<div class="dfg">
				<span>已有账号？</span>
				<a href="http://auth.taolele.com/login.html">请登录</a>
			</div>
		</header>
		<section>
			<form action="/register" method="POST" class="one">
        <div class="tips" style="color: red" th:text="${errors!=null? (#maps.containsKey(errors, 'msg')?errors.msg:''):''}">

        </div>
				<div class="register-box">
					<label class="username_label">用 户 名
			<input maxlength="20" name="userName" type="text" placeholder="您的用户名和登录名" >
					</label>
					<div class="tips" style="color: red" th:text="${errors!=null? (#maps.containsKey(errors, 'userName')?errors.userName:''):''}">

					</div>
				</div>
				<div class="register-box">
					<label class="other_label">设 置 密 码
			<input maxlength="20" type="password" name="password" placeholder="建议至少使用两种字符组合">
			</label>
					<div class="tips" style="color: red" th:text="${errors!=null? (#maps.containsKey(errors, 'password')?errors.password:''):''}">

					</div>
				</div>
				<div class="register-box">
					<label class="other_label">确 认 密 码
			<input maxlength="20" type="password" placeholder="请再次输入密码">
			</label>
					<div class="tips">

					</div>
				</div>
				<div class="register-box">
					<label class="other_label">
			<span>中国 +86∨</span>
			<input class="phone" id="phoneNum" name="phone" maxlength="20" type="text" placeholder="建议使用常用手机">
			</label>
					<div class="tips" style="color: red" th:text="${errors!=null? (#maps.containsKey(errors, 'phone')?errors.phone:''):''}">

					</div>
				</div>
				<div class="register-box">
					<label class="other_label">验 证 码
			<input maxlength="20" name="code" type="text" placeholder="请输入验证码" class="caa">
			</label>
					<a id="sendCode"> 发送验证码</a>
          <div class="tips" style="color: red" th:text="${errors!=null? (#maps.containsKey(errors, 'code')?errors.code:''):''}">

          </div>
				</div>
				<div class="arguement">
					<input type="checkbox" id="xieyi"> 阅读并同意
					<a href="http://auth.taolele.com/reg.html">《淘乐乐商城用户注册协议》</a>
					<a href="http://auth.taolele.com/reg.html">《隐私政策》</a>
					<div class="tips">

					</div>
					<br />
					<div class="submit_btn">
						<button type="submit" id="submit_btn">立 即 注 册</button>
					</div>
				</div>

			</form>
			<div class="two">

			</div>
		</section>
		<br /><br />
		<hr>

		<p class="bq">Copyright©2020-2020 淘乐乐商城taolele.com 版权所有</p>
		<br /><br />
		<script type="text/javascript" charset="utf-8">
			$('.laoda').hide()

			$(function() {
				var stuList = getStuList(); //设置传送信息：学生的集合

				//聚焦失焦input
				$('input').eq(0).focus(function() {
					if($(this).val().length == 0) {
						$(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");
					}
				})
				$('input').eq(1).focus(function() {
					if($(this).val().length == 0) {
						$(this).parent().next("div").text("建议使用字母、数字和符号两种以上的组合，6-20个字符");
					}
				})
				$('input').eq(2).focus(function() {
					if($(this).val().length == 0) {
						$(this).parent().next("div").text("请再次输入密码");
					}
				})
				$('input').eq(3).focus(function() {
					if($(this).val().length == 0) {
						$(this).parent().next("div").text("验证完后，你可以使用该手机登陆和找回密码");
					}
				})
				$('input').eq(4).focus(function() {
						if($(this).val().length == 0) {
							$(this).parent().next().next("div").text("点击发送验证码");
						}
					})
					//input各种判断
					//用户名：
				$('input').eq(0).blur(function() {
						if($(this).val().length == 0) {
							$(this).parent().next("div").text("");
							$(this).parent().next("div").css("color", '#ccc');
						} else if($(this).val().length > 0 && $(this).val().length < 4) {
							$(this).parent().next("div").text("长度只能在4-20个字符之间");
							$(this).parent().next("div").css("color", 'red');
						} else if($(this).val().length >= 4 && !isNaN($(this).val())) {
							$(this).parent().next("div").text("用户名不能为纯数字");
							$(this).parent().next("div").css("color", 'red');
						} else {
							for(var m = 0; m < stuList.length; m++) {
								if($(this).val() == stuList[m].name) {
									$(this).parent().next("div").text("该用户名已被注册");
									$(this).parent().next("div").css("color", 'red');
									return;
								}
							}
							$(this).parent().next("div").text("");
						}
					})
					//密码
				$('input').eq(1).blur(function() {
						if($(this).val().length == 0) {
							$(this).parent().next("div").text("");
							$(this).parent().next("div").css("color", '#ccc');
						} else if($(this).val().length > 0 && $(this).val().length < 6) {
							$(this).parent().next("div").text("长度只能在6-20个字符之间");
							$(this).parent().next("div").css("color", 'red');
						} else {
							$(this).parent().next("div").text("");
						}
					})
					//	确认密码
				$('input').eq(2).blur(function() {
						if($(this).val().length == 0) {
							$(this).parent().next("div").text("");
							$(this).parent().next("div").css("color", '#ccc');
						} else if($(this).val() != $('input').eq(1).val()) {
							$(this).parent().next("div").text("两次密码不匹配");
							$(this).parent().next("div").css("color", 'red');
						} else {
							$(this).parent().next("div").text("");
						}
					})
					//	手机号
				$('input').eq(3).blur(function() {
						if($(this).val().length == 0) {
							$(this).parent().next("div").text("");
							$(this).parent().next("div").css("color", '#ccc');
						// } else if($(this).val().substr(0, 3) != 138 && $(this).val().substr(0, 3) != 189 && $(this).val().substr(0, 3) != 139 && $(this).val().substr(0, 3) != 158 && $(this).val().substr(0, 3) != 188 && $(this).val().substr(0, 3) != 157 || $(this).val().length != 11) {
						} else if($(this).val().length != 11) {
							$(this).parent().next("div").text("手机号格式不正确");
							$(this).parent().next("div").css("color", 'red');
						} else {
							$(this).parent().next("div").text("");
						}
					})
					// 	验证码
					//	 验证码刷新
				function code() {
					var str = "qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPLKJHGFDSAZXCVBNM";
					var str1 = 0;
					for(var i = 0; i < 4; i++) {
						str1 += str.charAt(Math.floor(Math.random() * 62))
					}
					str1 = str1.substring(1)
					$("#code").text(str1);
				}
				code();
				$("#code").click(code);
				//	验证码验证
				$('input').eq(4).blur(function() {
						if($(this).val().length == 0) {
							$(this).parent().next().next("div").text("");
							$(this).parent().next().next("div").css("color", '#ccc');
						} else if($(this).val().toUpperCase() != $("#code").text().toUpperCase()) {
							// $(this).parent().next().next("div").text("验证码不正确");
							// $(this).parent().next().next("div").css("color", 'red');
						} else {
							$(this).parent().next().next("div").text("");
						}
					})
					//	提交按钮
				// $("#submit_btn").click(function(e) {
				// 	for(var j = 0; j < 5; j++) {
				// 		if($('input').eq(j).val().length == 0) {
				// 			$('input').eq(j).focus();
				// 			if(j == 4) {
				// 				$('input').eq(j).parent().next().next("div").text("此处不能为空");
				// 				$('input').eq(j).parent().next().next("div").css("color", 'red');
				// 				e.preventDefault();
				// 				return;
				// 			}
				// 			$('input').eq(j).parent().next(".tips").text("此处不能为空");
				// 			$('input').eq(j).parent().next(".tips").css("color", 'red');
				// 			e.preventDefault();
				// 			return;
				// 		}
				// 	}
				// 	//协议
				// 	if($("#xieyi")[0].checked) {
				// 		//向变量stuList数组添加一个数值，数值内部格式Student(name,password,tel,id)
				// 		//发送用户信息
				// 		stuList.push(new Student($('input').eq(0).val(), $('input').eq(1).val(), $('input').eq(3).val(), stuList.length + 1));
				// 		localStorage.setItem('stuList', JSON.stringify(stuList));
				// 		alert("注册成功");
				// 		window.open("userlist.html", "_blank");
				// 	} else {
				// 		$("#xieyi").next().next().next(".tips").text("请勾选协议");
				// 		$("#xieyi").next().next().next(".tips").css("color", 'red');
				// 		e.preventDefault();
				// 		return;
				// 	}
				// })

				//  建立构造函数，构造学生信息模板
				function Student(name, password, tel, id) {
					this.name = name;
					this.password = password;
					this.tel = tel;
					this.id = id;
				}
				//	获取之前所有已经注册的用户集合
				function getStuList() {
					var list = localStorage.getItem('stuList');
					if(list != null) {
						return JSON.parse(list);
					} else {
						return new Array();
					}
				}

			})
			$(".ty").click(function() {
				$(".zong").hide();
				$(".laoda").hide();
			});
      $(".quxiao").click(function() {
          $(".zong").hide();
          $(".laoda").hide();
      });
			$(".cuo").click(function() {
				$(".zong").hide();
			});

			$(function () {
        $("#sendCode").click(function () {
            if($(this).hasClass("disabled")){
                // 1.进入倒计时效果
            }else{
                $.get("/sms/sendcode?phone=" + $("#phoneNum").val(), function (data) {
                    if(data.code != 0){
                        layer.msg(data.msg)
                    }
                });
                // 2.给指定手机号发送验证码
                timeoutChangeStyle()
            }
        })
      })

        var num = 60;
      function timeoutChangeStyle() {
          $("#sendCode").attr("class","disabled")
          if(num == 0){
              num = 60;
              $("#sendCode").attr("class","");
              $("#sendCode").text("发送验证码");
          }else{
              var str = num + "s 后再次发送";
              $("#sendCode").text(str);
              setTimeout("timeoutChangeStyle()",1000);
          }
          num --
      }
		</script>
	</body>

</html>
